<div class="loading-indicator--location"
     data-indicator-name="relationAddFixed">
    <div class="grid-block v-align collapse  wp-relations-create"
         ng-if="$ctrl.showRelationsCreateForm || $ctrl.externalFormToggle">
        <div class="grid-content medium-10 collapse">
            <wp-relations-autocomplete
                    selected-wp-id="$ctrl.selectedWpId"
                    loading-promise-name="relationAddFixed"
                    selected-relation-type="$ctrl.selectedRelationType"
                    focus>
            </wp-relations-autocomplete>
        </div>
        <div class="grid-content medium-2 collapse wp-relations-controls-section relation-row">
            <accessible-by-keyboard
                    execute="$ctrl.createRelation()"
                    is-disabled="$ctrl.isDisabled"
                    aria-hidden="false">
                <icon-wrapper icon-name="checkmark"
                              icon-title="{{ ::$ctrl.text.save }}">
                </icon-wrapper>
            </accessible-by-keyboard>
            <accessible-by-keyboard
                    execute="$ctrl.toggleRelationsCreateForm()"
                    aria-hidden="false">
                <icon-wrapper icon-name="remove"
                              icon-title="{{ ::$ctrl.text.abort }}">
                </icon-wrapper>
            </accessible-by-keyboard>
        </div>
</div>
</div>
